<template>
  <view class="uni-popup-message">
    <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__' + type">
      <slot>
        <text class="uni-popup-message-text" :class="'uni-popup__' + type + '-text'">
          {{ message }}
        </text>
      </slot>
    </view>
  </view>
</template>

<script>
  import popup from '../uni-popup/popup.js';
  /**
   * PopUp 弹出层-消息提示
   * @description 弹出层-消息提示
   * @tutorial https://ext.dcloud.net.cn/plugin?id=329
   * @property {String} type = [success|warning|info|error] 主题样式
   *  @value success 成功
   * 	@value warning 提示
   * 	@value info 消息
   * 	@value error 错误
   * @property {String} message 消息提示文字
   * @property {String} duration 显示时间，设置为 0 则不会自动关闭
   */

  export default {
    name: 'uniPopupMessage',
    mixins: [popup],
    props: {
      /**
       * 主题 success/warning/info/error	  默认 success
       */
      type: {
        type: String,
        default: 'success',
      },
      /**
       * 消息文字
       */
      message: {
        type: String,
        default: '',
      },
      /**
       * 显示时间，设置为 0 则不会自动关闭
       */
      duration: {
        type: Number,
        default: 3000,
      },
      maskShow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {};
    },
    created() {
      this.popup.maskShow = this.maskShow;
      this.popup.messageChild = this;
    },
    methods: {
      timerClose() {
        if (this.duration === 0) return;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.popup.close();
        }, this.duration);
      },
    },
  };
</script>
<style lang="scss">
  .uni-popup-message {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
  }

  .uni-popup-message__box {
    background-color: #e1f3d8;
    padding: 10px 15px;
    border-color: #eee;
    border-style: solid;
    border-width: 1px;
    flex: 1;
  }

  @media screen and (min-width: 500px) {
    .fixforpc-width {
      margin-top: 20px;
      border-radius: 4px;
      flex: none;
      min-width: 380px;
      /* #ifndef APP-NVUE */
      max-width: 50%;
      /* #endif */
      /* #ifdef APP-NVUE */
      max-width: 500px;
      /* #endif */
    }
  }

  .uni-popup-message-text {
    font-size: 14px;
    padding: 0;
  }

  .uni-popup__success {
    background-color: #e1f3d8;
  }

  .uni-popup__success-text {
    color: #67c23a;
  }

  .uni-popup__warn {
    background-color: #faecd8;
  }

  .uni-popup__warn-text {
    color: #e6a23c;
  }

  .uni-popup__error {
    background-color: #fde2e2;
  }

  .uni-popup__error-text {
    color: #f56c6c;
  }

  .uni-popup__info {
    background-color: #f2f6fc;
  }

  .uni-popup__info-text {
    color: #909399;
  }
</style>
